<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            plain
            icon="Close"
            @click="handleClose"
        >关闭
        </el-button>
      </el-col>
    </el-row>
    <el-divider/>
    <el-card shadow="never">
      <div class="top-box">
        <div>
          <text>咨询状态：</text>
          <text v-if="consultInfo.consultationStatus==1">咨询中</text>
          <text v-if="consultInfo.consultationStatus==2">已入住</text>
          <text v-if="consultInfo.consultationStatus==3">已关闭</text>
        </div>
        <div>客户等级：{{ consultInfo.customerLevel || '无' }}</div>
        <div>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary">跟进登记</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary">参观登记</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary">长者建档</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary">办理入住</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger">关闭咨询</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div>咨询人信息：{{ consultInfo.consultantName1 }}/{{ consultInfo.consultantPhone1 }}</div>
      <div>长者信息：{{ consultInfo.elderlyName }}/{{ consultInfo.elderlyPhone }}</div>
    </el-card>
    <div style="margin-top: 20px">
      <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
      >
        <el-tab-pane label="咨询信息" name="first">
          <div>
            <div class="title_">咨询人信息</div>
            <div class="line_"></div>
            <div class="sub-title">第一咨询人</div>
            <div class="ds_">
              <div>姓名：{{ consultInfo.consultantName1 }}</div>
              <div>手机号：{{ consultInfo.consultantPhone1 }}</div>
              <div>与长者关系：{{ consultInfo.relationship1 }}</div>
            </div>
            <div class="sub-title">第二咨询人</div>
            <div class="ds_">
              <div>姓名：{{ consultInfo.consultantName2 }}</div>
              <div>手机号：{{ consultInfo.consultantPhone2 }}</div>
              <div>与长者关系：{{ consultInfo.relationship2 }}</div>
            </div>
          </div>
          <div>
            <div class="title_">长者信息</div>
            <div class="line_"></div>
            <div class="ds_">
              <div>姓名：{{ consultInfo.elderlyName }}</div>
              <div>生日：{{ consultInfo.elderlyBirthday }}</div>
              <div>手机号：{{ consultInfo.elderlyPhone }}</div>
            </div>
            <div class="ds_">
              <div>性别：
                <dict-tag :options="sys_user_sex" :value="consultInfo.elderlyGender"/>
              </div>
              <div>身份证：{{ consultInfo.elderlyIdCard }}</div>
              <div>民族：{{ consultInfo.ethnicity }}</div>
            </div>
            <div class="ds_">
              <div>能力等级：{{ consultInfo.abilityLevel }}</div>
              <div>是否居住过养老机构：{{ consultInfo.livedIn == 1 ? '是' : '否' }}</div>
              <div>入住过养老机构名称：{{ consultInfo.nursingHome || '' }}</div>
            </div>
          </div>
          <div>
            <div class="title_">咨询信息</div>
            <div class="line_"></div>
            <div class="ds_">
              <div>咨询意向：{{ consultInfo.consultationIntention }}</div>
              <div>客户渠道：{{ consultInfo.customerChannel }}</div>
              <div>咨询原因：{{ consultInfo.reason }}</div>
            </div>
            <div class="ds_">
              <div>介绍人：{{ consultInfo.introducer }}</div>
              <div>咨询详情：{{ consultInfo.consultationDetails }}</div>
              <div></div>
            </div>
            <div class="img-box">
              附件：
              <image-preview :src="consultInfo.attachment" :width="100" :height="100"/>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="跟进记录" name="second">
          <el-table v-loading="loading" :data="followUpRecord">
            <el-table-column label="序号" align="center" type="index" width="60"/>
            <el-table-column label="跟进人" align="center" prop="consultantName1"/>
            <el-table-column label="客户等级" align="center" prop="elderlyName"/>
            <el-table-column label="跟进时间" align="center" prop="createTime" width="180"/>
            <el-table-column label="跟进内容" align="center" prop="consultationStatus"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button
                    type="text"
                    icon="Edit"
                >修改
                </el-button>
                <el-button
                    type="text"
                    icon="Delete"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
              v-show="total>0"
              :total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getFollowUpList"
          />
        </el-tab-pane>
        <el-tab-pane label="参观记录" name="third">
          <el-table v-loading="loading" :data="visitRecord">
            <el-table-column label="序号" align="center" type="index" width="60"/>
            <el-table-column label="接待人" align="center" prop="consultantName1"/>
            <el-table-column label="参观时间" align="center" prop="elderlyName"/>
            <el-table-column label="参观情况" align="center" prop="consultationStatus"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button
                    type="text"
                    icon="Edit"
                >修改
                </el-button>
                <el-button
                    type="text"
                    icon="Delete"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
              v-show="total1>0"
              :total="total1"
              v-model:page="queryParams1.pageNum"
              v-model:limit="queryParams1.pageSize"
              @pagination="getVisitList"
          />
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="fourth">
          <el-table v-loading="loading" :data="operationRecord">
            <el-table-column label="序号" align="center" type="index" width="60"/>
            <el-table-column label="操作时间" align="center" prop="elderlyName"/>
            <el-table-column label="操作人" align="center" prop="consultantName1"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button
                    type="text"
                    icon="Edit"
                >修改
                </el-button>
                <el-button
                    type="text"
                    icon="Delete"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
              v-show="total2>0"
              :total="total2"
              v-model:page="queryParams2.pageNum"
              v-model:limit="queryParams2.pageSize"
              @pagination="getOperationList"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import {useRoute} from 'vue-router';
import {getConsultation} from "@/views/record/consultManage/api/consultation.js";

const route = useRoute();

const {proxy} = getCurrentInstance();
const {sys_user_sex} = proxy.useDict('sys_user_sex')
const id = computed(() => route.query.id)

const consultInfo = ref({})
const activeName = ref('first')
const url = ref('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg,https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg')

const loading = ref(false)
const followUpRecord = ref([])
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const visitRecord = ref([])
const total1 = ref(0)
const queryParams1 = ref({
  pageNum: 1,
  pageSize: 10,
})
const operationRecord = ref([])
const total2 = ref(0)
const queryParams2 = ref({
  pageNum: 1,
  pageSize: 10,
})

onMounted(() => {
  getConsultInfo()
})

function handleClick(event) {
  console.log(event, 67)
}

/** 获取详情 */
function getConsultInfo() {
  getConsultation(id.value).then(res => {
    consultInfo.value = res.data
  })
}

/** 获取跟进记录 */
function getFollowUpList() {

}

/** 获取参观记录 */
function getVisitList() {

}

/** 获取操作记录 */
function getOperationList() {

}

/** 返回按钮操作 */
function handleClose() {
  const obj = {path: "/customer_management/consultList"}
  proxy.$tab.closeOpenPage(obj)
}
</script>

<style scoped lang="scss">
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title_ {
  font-size: 16px;
  font-weight: bold;
}

.line_ {
  width: 100%;
  height: 1px;
  background: #cccccc;
  margin: 10px 0;
}

.sub-title {
  font-size: 14px;
  color: #9e9e9e;
  margin-bottom: 5px;
}

.ds_ {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.ds_ > div {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img-box {
  display: flex;
  align-items: flex-start;
}
</style>